<template>
  <!-- <div> -->
  <el-drawer v-model="drawer" title="" :with-header="false" size="80%">
    <div
      class="py-[13px] px-[16px] flex items-center justify-between border-b border-solid border-[#E8E8E8]"
    >
      <span class="text-[18px] font-bold">原始数据上传记录</span>
      <el-icon @click="drawer = false" class="cursor-pointer"
        ><Close
      /></el-icon>
    </div>
    <div class="px-[40px] pb-[32px] tableLine">
      <!-- <ul class="flex items-center mt-[28px] mb-[24px]">
        <li
          :class="`dataItem ${selectId == item.id ? 'active' : ''}`"
          v-for="item in tabList"
          :key="item.id"
          @click="onTabClick(item)"
        >
          {{ item.name }}
          <span v-if="item.total > 0">（{{ item.total }}）</span>
        </li>
        不显示状态
      </ul> -->
      <div class="tableLine mt-[28px]">
        <el-table
          border
          align="left"
          :data="tableData"
          style="width: 100%; margin-bottom: 20px; height: 100%"
          row-key="id"
        >
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="originalName" label="文件名称" width="640" />
          <!-- <el-table-column prop="originalPath" label="文件位置" width="360" />
          <el-table-column prop="infoId" label="数据数量" width="180" /> -->
          <!-- <el-table-column prop="fileStatus" label="解析状态" width="300">
            <template #default="{ row }">
              <div class="flex items-center">
                <div
                  :class="`${row.fileStatus == '2' ? 'fail' : 'sussess'}`"
                ></div>
                <span>{{ row.fileStatus == "2" ? "解密失败" : "成功" }}</span>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="createdTime" label="上传时间" >
            <template #default="{ row }">{{
              getDate(row.createdTime)
            }}</template>
          </el-table-column>
          <template #empty>
            <el-empty description="无查询结果" />
          </template>
        </el-table>
      </div>
      <page
        class="place-self-end"
        :options="options"
        :change="change"
        :handleSizeChange="handleSizeChange"
      ></page>
    </div>
  </el-drawer>
  <!-- </div> -->
</template>
<script setup>
import dayjs from "dayjs";
import { onMounted } from "vue";
const drawer = ref(false);
// const caseId = ref("");
const selectId = ref("");
const options = reactive({
  total: 0,
  pageSize: 10,
  pageNum: 1,
});
const tabList = ref([
  {
    name: "全部",
    id: "",
  },
  {
    name: "解析成功",
    id: "1",
  },
  {
    name: "解析失败",
    id: "2",
  },
]);
const { caseId } = defineProps({
  caseId: {
    type: String,
    default: "",
  },
});
const tableData = ref([]);
// 每页显示个数切换
const handleSizeChange = (value) => {
  options.pageSize = value;
  queryList();
};
// 页码切换
const change = (val) => {
  options.pageNum = val;
  queryList();
};
// tab切换
const onTabClick = (item) => {
  selectId.value = item.id;
  options.pageNum = 1;
  options.pageSize = 10;
  queryList();
};
const onOpen = () => {
  drawer.value = true;
   // 每次打开时都刷新数据
   if (caseId) {
    // 重置分页到第一页
    options.pageNum = 1;
    options.pageSize = 10;
    selectId.value = "";
    
    // 刷新数据
    queryList();
    getTotal();
  }
  // caseId.value = id;
};
// 获取数据列表
const queryList = async () => {
  let [err, res] = await api.getFileList({
    caseId: caseId,
    pageNumber: options.pageNum,
    pageSize: options.pageSize,
    isPage: 0,
    fileStatus: selectId.value,
  });
  if (err) return;
  tableData.value = res.data.records;
  options.total = res.data.total;
};
const getDate = (value) => {
  return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
};
const getTotal = async () => {
  let [err, res] = await api.getNumber(caseId);
  if (err) return;
  tabList.value = [
    {
      name: "全部",
      id: "",
      total: res.data.total,
    },
    {
      name: "解析成功",
      id: "1",
      total: res.data.sucNumber,
    },
    {
      name: "解析失败",
      id: "2",
      total: res.data.faiNumber,
    },
  ];
};
onMounted(() => {
  //queryList();
  // if(caseId.value) getTotal();
});
// 监听 drawer 状态变化，每次打开时刷新数据

watch(
  () => caseId,
  (val, old) => {
    if (val) {
      queryList();
      getTotal();
    }
  }
  //{ immediate: true }
);
defineExpose({
  onOpen,
});
</script>
<style lang="scss" scoped>
.tableLine {
  flex: 1;
  display: flex;
  flex-direction: column;
}
:deep(.el-drawer__body) {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
}
.dataItem {
  cursor: pointer;
  margin-right: 12px;
  padding: 4px 16px;
  border: 1px solid rgba(221, 221, 221, 1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 1);
  &.active {
    border: none;
    color: #fff;
    background: rgba(26, 102, 255, 1);
  }
}
.dataItem:last-of-type {
  margin-right: 0;
}
.sussess {
  margin-right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 20px;
  background: rgba(19, 194, 49, 1);
}
.fail {
  margin-right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 20px;
  background: rgba(224, 27, 43, 1);
}
</style>

